import React from "react";
import styles from "./index.module.scss";
import { useRouter } from "next/navigation";
type TMenuItem = {
  title: string;
  value: string;
};
interface MenuProps {
  menuItems: TMenuItem[];
  className?: string;
  handleRouter?: (value: string) => void;
}
const Menu: React.FC<MenuProps> = (props) => {
  const { menuItems, className, handleRouter } = props;
  return (
    <div className={className}>
      <div className={styles["menu-ctn"]}>
        {menuItems.map((item) => (
          <div
            key={item.value}
            className={styles["items"]}
            onClick={() => handleRouter?.(item.value)}
          >
            <span className={styles["text"]}>{item.title}</span>
          </div>
        ))}
      </div>
    </div>
  );
};
export default Menu;
